import React, {Component} from 'react';
import {message, Space} from "antd";
import TheTable from "@/components/TheTable";
import ThePagination from "@/components/ThePagination";
import TheButton from "@/components/TheButton";
import TheQueryForm from '@/components/TheQueryForm';
import {
    apiGetPetSceneClassifyPage,apiPetSceneClassifyState,apiGetPlatformSetUseValue
} from '@/request/sceneTool'

class Index extends Component {
    state = {
        columns: [
            {
                title: "ID",
                dataIndex: "sceneClassifyId",
                key: "sceneClassifyId",
                render: (text, record) => {
                    return text
                }
            },
            {
                title: "分类名称",
                dataIndex: "sceneClassifyName",
                key: "sceneClassifyName",
            },
            {
                title: "所属",
                dataIndex: "platformSetShowValue",
                key: "platformSetShowValue",
            },
            {
                title: "状态",
                dataIndex: "sceneClassifyStatus",
                key: "sceneClassifyStatus",
                render: (text, record) => {
                    let label = ''
                    switch (text) {
                        case 'Y':
                            label = "启用"
                            break;
                        case 'N':
                            label = "停用"
                            break;
                        default:
                            label = "字段值错误"
                    }
                    return label
                }
            },
            {
                title: "排序",
                dataIndex: "sorted",
                key: "sorted",
            },
            {
                title: "操作",
                fixed: "right",
                width: 200,
                render: (text, render) => {
                    return (
                        <div>
                            <TheButton haspermi={['sceneTool:classify:edit']} onClick={() => this.goEdit(render.sceneClassifyId)}>编辑</TheButton>
                            {render.sceneClassifyStatus === 'N' && <TheButton haspermi={['sceneTool:classify:state']} onClick={() => this.enable(render.sceneClassifyId)}>启用</TheButton>}
                            {render.sceneClassifyStatus === 'Y' && <TheButton haspermi={['sceneTool:classify:state']} onClick={() => this.disable(render.sceneClassifyId)}>停用</TheButton>}
                        </div>
                    );
                },
            },
        ],
        dataSource: [],
        pageData: {
            pageNo: 1,
            pageSize: 10,
        },
        total: 0,
        searchOption: [
            {
                field: 'sceneClassifyName',
                label: '分类名称',
                placeholder: '请输入',
                required: false,
                rules: [],
                type: 'Input',
            },
            {
                field: 'platformSetUseValue',
                label: '所属',
                placeholder: '请选择',
                required: false,
                rules: [],
                type: 'Select',
                options: [
                    {platformSetUseValue: '', platformSetShowValue: '全部'},
                ],
                api: apiGetPlatformSetUseValue,
                params: { platformSetKey: 'PET_SCENE', platformSetShow: 'Y'},
                txt: 'platformSetShowValue',
                value: 'platformSetUseValue',
            },
        ],
        queryForm: {},
    }
    componentDidMount() {
        this.getData()
    }

    getData = async () => {
        let { pageNo, pageSize } = this.state.pageData
        await apiGetPetSceneClassifyPage({
            pageNo,
            pageSize,
            ...this.state.queryForm,
        }).then(res=>{
            this.setState({
                dataSource: res.data,
                pageData: {
                    pageNo: res.pageNo,
                    pageSize: res.pageSize
                },
                total: res.totalCount,
            })
        })
    }
    add = () => {
        this.props.history.push(`/sceneTool/classify/add/null`)
    }
    goEdit = async (id) => {
        this.props.history.push(`/sceneTool/classify/add/${id}`)
    }
    enable = async (sceneClassifyId) => {
        await apiPetSceneClassifyState({
            sceneClassifyId,
            sceneClassifyStatus: 'Y'
        }).then(res=>{
            if (res.data){
                message.success("成功启用")
                this.getData()
            }
        })
    }
    disable = async(sceneClassifyId) => {
        await apiPetSceneClassifyState({
            sceneClassifyId,
            sceneClassifyStatus: 'N'
        }).then(res=>{
            if (res.data){
                message.success("禁用成功")
                this.getData()
            }
        })
    }
    onReset() {
        this.setState({
            queryForm: {}
        }, () => {
            this.pageChange(1, 10)
        })
    }
    onSearch(values) {
        this.setState({
            pageData: { pageNo: 1, pageSize: 10 },
            queryForm: values
        }, () => {
            this.getData()
        })
    }
    pageChange = (pageNo, pageSize) => {
        this.setState({
            pageData: {
                pageNo,
                pageSize
            }
        }, () => {
            this.getData()
        })
    };
    render() {
        const { columns, dataSource, pageData:{pageNo, pageSize}, total, searchOption } = this.state
        return <div className="p-layout-box">
            <TheQueryForm
                ref={(ref) => this.queryFormRef = ref}
                show={true}
                option={searchOption}
                onReset={() => this.onReset()}
                onGetValues={(fieldsValue) => this.onSearch(fieldsValue)}
              />
            <Space direction="vertical">
                <TheButton haspermi={['sceneTool:classify:add']} type="primary"  size='middle'  onClick={()=>this.add()} >新增</TheButton>
                <TheTable
                    columns={columns}
                    dataSource={dataSource}
                />
            </Space>
            <ThePagination pageNo={pageNo} pageSize={pageSize} total={total} pageChange={this.pageChange} />
        </div>
    }
}

export default Index;
